<template>
  <div id="right-funnel">
    <div class="funnel-header">人员结构</div>
    <div id="right-funnel-chart"></div>
  </div>
</template>

<script>
export default {
  name: 'RightFunnel',
  data () {
    return {
      option: {
        color: ['#b38926', '#5e33c2', '#3756c1', '#1cae9b', '#1cae9b'],
        series: [
          {
            name: '漏斗图',
            type: 'funnel',
            x: '10%',
            y: 0,
            width: '100%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '40%',
            sort: 'ascending', // 'ascending', 'descending'
            gap: 0,
            data: [
              { value: 10, name: '育婴师' },
              { value: 20, name: '护工' },
              { value: 30, name: '月嫂' },
              { value: 40, name: '保姆' }].sort(function (a, b) { return a.value - b.value }),
            roseType: true,
            label: {
              normal: {
                formatter: function (params) {
                  return params.name + ' ' + params.value * 100
                },
                position: 'left',
                fontSize: 20
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0,
                shadowBlur: 30,
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
    let chart = this.$echarts.init(document.getElementById('right-funnel-chart'))
    chart.setOption(this.option)
  }
}
</script>

<style lang="less" scoped>
  #right-funnel {
    width: 100%;
    height: 100%;

    .funnel-header {
      font-size: 18px;
      font-weight: 550;
      width: 100%;
      text-align: center;
      margin: 10px 0 30px 0;
    }

    #right-funnel-chart {
      height: calc(~"100% - 40px");
    }
  }
</style>
